<template>
  <uni-nav-bar :title="cart_code" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale">
    <view class="datas space-between">
      <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
        @change="change" />
      <!--      <picker @change="bindPickerChange" :value="index" :range="array">
        <view class="uni-input">{{array[index]?array[index]:'筛选'}}</view>
      </picker> -->
    </view>
    <view class="center" style="font-size: 26rpx;margin-left:15rpx;">
      <view>收益：{{shouyi}}</view>
      <!-- <view v-if="orderName" class="order">
        <text>{{ orderName }}</text>
        <uni-icons type="closeempty" color="#666" size="18" style="margin-left: 10rpx" @click="del()"></uni-icons>
      </view> -->
    </view>
  </view>
  <!-- 订单列表 -->
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <IncomeOrder :attendanList="attendanList" :type="'Sale'"></IncomeOrder>
    <Popu v-if="attendanList.length<1" :pageHeight="pageHeight" text="暂无订单记录"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { format, subDays } from 'date-fns';
  import Popu from '@c/earthPushing/common/popu.vue';
  import { ref } from 'vue';
  import { toPublish } from '@mqtt';
  import { onLoad } from '@dcloudio/uni-app';
  import { showLoading } from '@/utils/prompt';
  import { getPatnerCartOrder } from '@/gql/earthPushing/attendance';
  import { getDriverID } from '@/stores/driverID';
  import IncomeOrder from '@c/order/incomeOrder.vue';
  const staff_id = getDriverID();
  const index = ref(10)
  const orderName = ref()
  // const array = ['新用户', '次新用户', '老用户', '大客户', '车队'];
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const attendanList = ref([])
  const lastPage = ref(1);
  const currentPage = ref(1);
  const pageHeight = ref()
  const cart_code = ref()
  const cart_id = ref()
  const shouyi = ref()
  uni.getSystemInfo({
    success: function (res) {
      pageHeight.value = res.windowHeight - 140;
    },
  });
  onLoad((pearm) => {
    cart_code.value = pearm.cart_code
    cart_id.value = pearm.cart_id
    init()
  })
  function change([sta, en]) {
    currentPage.value = 1;
    attendanList.value = [];
    start = sta;
    end = en;
    init();
  }
  function init() {
    showLoading()
    const payload = {
      query: getPatnerCartOrder,
      variables: {
        page: currentPage.value,
        staff_id,
        start,
        end,
        cart_id: Number(cart_id.value),
      },
    };
    toPublish(
      'ql/staff/getPatnerCartOrder',
      payload,
      (obj : any) => {
        const { getPatnerCartOrder } = obj.data;
        attendanList.value = [...attendanList.value, ...getPatnerCartOrder.list];
        lastPage.value = getPatnerCartOrder.lastpage;
        shouyi.value = getPatnerCartOrder.shouyi
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function del() {
    orderName.value = ''
    index.value = 10
  }
  function bindPickerChange(e : any) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    index.value = e.detail.value
    orderName.value = array[e.detail.value]
  }
</script>

<style scoped lang="less">
  .order {
    display: flex;
    align-items: center;
    padding: 2px 20rpx;
    box-sizing: border-box;
    margin-left: 20rpx;
    background-color: #eee;
    border-radius: 30rpx;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>